<template>
  <div class="tab-warp">
    <Header :data="data" @click="headerClick"></Header>
    <Content :data="data" :index=state.activeIndex></Content>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive } from 'vue';
import Header from "./header/index.vue"
import Content from "./content/index.vue"

interface DataItem {
  title: string;
  content: string;
}

const props = defineProps({
  data: {
    type: [] as DataItem[],
    default: () => []
  }
})

const state = reactive({
  activeIndex: 0
})

const headerClick = (index: number) => {
  state.activeIndex = index
}
</script>
<style scoped lang='scss'>
.tab-warp {
  border: 2px solid #ccc;
  padding: 20px;
}
</style>